<%@page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<%@include file="/common/taglibs.jsp"%>
<link rel="shortcut icon" href="<c:url value='/common/img/favicon.ico'/>" type="image/x-icon"/>
<title>网格督查信息平台</title>

<script type="text/javascript" src="<c:url value='/common/js/jquery-1.11.1.min.js'/>"></script>
<style type="text/css">
body {
	font-size:12px; 
	color: #999999;
}
.input-userName {
	width:230px; 
	height:30px; 
	color:#CCCCCC; 
	line-height:30px; 
	border:#CCCCCC solid 1px; 
	background:url(<c:url value="/common/img/frame/user.png"/>) no-repeat 2px 4px; 
	padding-left:28px;
}
.input-password {
	width:230px; 
	height:30px;
	color:#CCCCCC; 
	line-height:30px; 
	border:#CCCCCC solid 1px; 
	background:url(<c:url value="/common/img/frame/pass.png"/>) no-repeat 2px 4px; 
	padding-left:28px;
}
.submit {
	background:url(<c:url value="/common/img/frame/button_icon.png"/>) top; 
	width:260px; 
	height:32px; 
	border:none; 
	outline:none; 
	font-size:16px; 
	color:#FFFFFF; 
	cursor:pointer;
}
.submit:hover {
	background:url(<c:url value="/common/img/frame/button_icon.png"/>) bottom;
}
.foget { 
	color:#0000FF; 
	text-decoration: underline;
	margin-left:20px; 
	font-size:12px;
}
label {
	font-size:12px;
}
</style>
<script type="text/javascript">
$(function() {
	$('#div_username').click(function() {
		$(this).hide();
		$('#username').focus();
	});
	$('#username').focus(function() {
		$('#div_username').hide();
		$('#error').html('');
	}).blur(function(){
		if($(this).val() == '') {
			$('#div_username').show();
		}
	});
	
	$('#div_password').click(function() {
		$(this).hide();
		$('#password').focus();
	});
	$('#password').blur(function() {
		if($(this).val() == '') {
			$('#div_password').show();
		}
	}).focus(function() {
		$('#div_password').hide();
		$('#error').html('');
	});
	
	$('#login_form').submit(function() {
		if($('#username').val() == $('#username').attr('before') || $.trim($('#username').val()).length == 0) {
			$('#error').html('请输入用户名');
			return false;
		}
		if($.trim($('#password').val()).length == 0) {
			$('#error').html('请输入密码');
			return false;
		}
		return true;
	});
}); 
</script>
</head>

<body style="background:url(<c:url value='/common/img/frame/bg.png'/>) top center" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" desc="登录">
<form id="login_form" action="login" method="post" autocomplete="off">
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
   			<td height="160">&nbsp;</td>
			<td height="160" width="710" valign="bottom">
				<img src="<c:url value='/common/img/frame/title.png'/>">
			</td>
			<td height="160">&nbsp;</td>
 		</tr>
  		<tr>
    		<td rowspan="2">&nbsp;</td>
    		<td width="710" height="340" align="center">
    			<table id="__01" width="680" height="310" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td rowspan="3">
							<img src="<c:url value='/common/img/frame/login_01.png'/>" width="219" height="310">
						</td>
						<td>
							<img src="<c:url value='/common/img/frame/login_02.png'/>" width="461" height="58">
						</td>
					</tr>
					<tr>
						<td background="<c:url value='/common/img/frame/login_03.png'/>"  width="461" height="231" align="left">
							<table width="260" border="0" cellspacing="0" cellpadding="0" align="center" style="margin-left:40px; float: left;">
			  					<tr>
			    					<td height="50">
			    						<label id="div_username" style="position: absolute; color: #CCCCCC; left: 630px; height: 35px; line-height: 35px;">用户名</label>
			    						<input id="username" name="username" type="text" class="input-userName" title="请输入用户名"/>
			    					</td>
			  					</tr>
			  					<tr> 
			    					<td height="50">
			    						<label id="div_password" style="position: absolute; color: #CCCCCC; left: 630px; height: 35px; line-height: 35px;">密码</label>
			    						<input id="password" name="password" type="password" class="input-password" title="请输入密码"/>
			    					</td>
			  					</tr>
			  					<tr>
			    					<td height="50">
			    						<input class="submit" type="submit" value="登录">
			    					</td>
			  					</tr>
			  					<tr>
			    					<td height="50">
			    						<div id="error" align="center" style="color:red; text-align: center;">
								    		<c:out value="${loginError }"/>
								    	</div>
									</td>
			  					</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td>
							<img src="<c:url value='/common/img/frame/login_04.png'/>" width="461" height="21">
						</td>
					</tr>
				</table>
			</td>
    		<td rowspan="2">&nbsp;</td>
  		</tr>
	</table>
</form>
</body>
</html>